<template>
	<view class="modal " v-if="visible">
		<view class="modal-mask" :class="{ show: isShow }"></view>
		<view class="modal-content animate__animated animate__fadeInDown" :class="{ show: isShow }">
			<!-- <image class="close" src="/static/home/ic-modal-close-white.png" @click="close()"></image> -->
			<image class="bg" src="@/static/logo.png" @click="close()"></image>
			<view class="container">
				<view class="title">发现新版本</view>
				<!-- <view class="content">
					<view v-for="line in contentLines">{{ line }}</view>
				</view> -->

				<button class="btn-primary-empty up-but" @click="hotUpdate()">
					立即更新
				</button>

				<!-- <button class="btn-primary btn-center" @click="update">立即更新</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import modalMixins from '@/js/mixins/modalMixins';
	import compareVersions from 'compare-version';
	import {
		getLastVersion,
	} from '@/common/config/api.js';
	export default {

		name: 'update-modal',

		mixins: [modalMixins],

		data() {
			return {
				version: {
					android: '',
					content: '',
					ios: '',
					version: '',
				},
			};
		},

		computed: {
			contentLines() {
				if (this.version && this.version.content) {
					return this.version.content.split('\n');
				}
				return [];
			},
		},

		mounted() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('landscape-primary'); // 锁定
			setTimeout(() => {
				this.checkUpdate();
			}, 2000);
			// #endif
		},

		methods: {
			checkUpdate() {
				console.log('检查',this.isShow,this.visible)
				let that = this
				plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
					const req = {
						appid: plus.runtime.appid,
						version: widgetInfo.version,
						imei: plus.device.imei,
						os: plus.os.name,
					};
					console.log('是否打开',this.isShow,this.visible)
					// 请求后台接口获取后台设置的最新版本号
					getLastVersion({
						type:1
					}).then(result => {
						console.log('接口返回',result)
						const version = result;
						that.version = version;
						let wgtUrl = that.version.url
						// const {
						// 	wgtUrl
						// } = version;
						console.log('获取版本',that.version.versionNum, widgetInfo.version,compareVersions(that.version.versionNum, widgetInfo.version))
						// 如果版本不一致，弹出提示框
						try {
							if (compareVersions(that.version.versionNum, widgetInfo.version) === 1) {
								console.log('版本不一致')
								if (that.version.isUpdate == 1) {
									that.hotUpdate(wgtUrl);
								} else {
									that.modalShow();
								}
							}
						} catch (e) {
							console.error('版本错误',e);
						}
					}).catch(error => {
						console.error(`check update fail: ${error}`);
					});
				});
			},

			update() {
				this.close();
				const url = plus.os.name === 'iOS' ? this.version.ios : this.version.android;
				plus.runtime.openURL(url);
			},

			hotUpdate(url) {
				plus.nativeUI.showWaiting('升级中...');
				const dtask = plus.downloader.createDownload(url, {
					method: 'GET'
				}, (d, status) => {
					if (status === 200) {
						console.log(`Download wgtu success: ${d.filename}`);
						plus.runtime.install(d.filename, {}, () => {
							plus.nativeUI.closeWaiting();
							plus.nativeUI.alert('新版本更新完毕，点击重新打开 APP', () => {
								plus.runtime.restart();
							});
						}, (e) => {
							plus.nativeUI.closeWaiting();
							alert(`热更新失败: ${e.message}`);
						});
					} else {
						plus.nativeUI.closeWaiting();
						alert(`下载更新资源失败: ${status}`);
					}
				});
				dtask.addEventListener('statechanged', (d, status) => {
					console.log(`statechanged: ${d.state}`);
				});
				dtask.start();
			},

		},

	};
</script>

<style scoped lang="less">
	.modal-content {
		// width: 540upx;
		// min-height: 577upx;
		// max-height: 610upx;
		background-color: rgba(30,30,33, 1);
		border-radius: 10upx;
		/*background: none;*/
		padding: 20px 40px;
		box-sizing: border-box;


		.background {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			border-radius: 16upx;
		}

		.close {
			position: absolute;
			bottom: -140upx;
			left: 50%;
			transform: translateX(-50%);
			width: 60upx;
			height: 60upx;
		}

	}

	.bg {
		width: 80px;
		height: 120px;
		// margin-top: -60upx;
		margin-bottom: 30upx;
		/*transform: translateY(-60upx);*/
		/*opacity: 0.5;*/
	}

	.container {
		padding: 0 40upx;
	}

	.title {
		font-size: 32px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(231,149,48,1);
		line-height: 45px;
		margin-bottom: 30px;
	}

	.content {
		font-size: 28px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 40px;
		letter-spacing: 1px;
		margin-bottom: 44px;
	}

	.btn-primary {
		width: 100%;
		height: 80px;
		line-height: 80px;
		margin-bottom: 40px;
	}

	.modal {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-mask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		transition: 0.3s;
		opacity: 0;

		&.show {
			opacity: 1;
		}

	}

	.modal-content {
		// width:560px;
		background: rgba(30,30,33, 1);
		border-radius: 30upx;
		// border: solid 4px #000;
		// border-radius: 4px;
		z-index: 10000;
		position: absolute;
		// top: 50%;
		// left: 50%;
		transform: translate(-50%, -50%) scale(0.618);
		text-align: center;
		box-sizing: border-box;
		// padding: 40px;
		transition: 0.2s;
		opacity: 0;

		&.show {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}

	}
	.up-but{
		border-radius: 50upx;
		background: rgba(254, 142, 4, 1);
		font-size: 24px;
		color: #fff;
		// padding: 30upx;
		width: 200px;
	}

	.modal-hide {}
</style>